<!DOCTYPE html>
<html lang="en">
<!-- {# 使用静态文件需导入静态文件夹 #}
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆页面</title>
    {# 导入jquery库 #}
    <script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>
    {# 导入axios库 #}
    <script src="{% static 'js/axios.js' %}"></script>
</head> -->

{% include "baohan.html" %}
<body>
    <h1>欢迎登陆</h1>
    <br /><br />
    <label>用户名：</label> <input id="username" type="text" /><br /><br />


    <label>密码：</label> <input id="password" type="password" /><br/><br />

    <br /><br />
    {# 使用html5的进度条标签 max是最大值 value起始值#}
    <progress style="width:400px;" id="pg" max="100" value="0"></progress>

    
    <br />


    <img style="cursor:pointer;" src="/captcha" onclick='this.src=this.src+"?"+Math.random()' /> <br />
        <label>请输入验证码</label><input id="code" type="text"><br />
    <span id='waite' style="display:none"> 请稍后，正在提交您的请求.... </span>

    <button id="sub" onclick="login()">提交登陆</button>
    <!-- <input id="sub" onclick="login()" type="button" value="登陆"/> -->

    <script>
        //建立一个进度条对象
        let pg = document.getElementById('pg');

        //定义登陆方法
        function login(){

            var username = $('#username').val();
            var password = $('#password').val();
            var code = $("#code").val();
            if(username ==""){alert("用户名不能为空");return false};
            if(password == ""){alert("密码不能为空");return false};
            if(code == ''){alert("验证码不能为空");return false};



        //定义拦截器
        axios.interceptors.request.use(function(config){

            
            //启动进度条
            incount = setInterval(function(){
                //判断进度条的进度
                if(pg.value != 100){
                    pg.value++;
                
                }else{
                    pg.value = 0;

                }
                //100是进度条时间
            },100);
            //返回配置文件
            return config;

        });


        //使用axios来请求接口
        //初始化传参
        let param = new URLSearchParams();
        //将参数传递给对象
        param.append('username',username);
        param.append('password',password);
        param.append('code',code);
        
            axios({
                //指定请求地址
                url:'/supermarket/do_login',
                //请求参数
                data:param,
                //请求类型
                method:'post',
                //接口返回值类型
                responseType:'text'
            })
            .then(function(obj){
                

                console.log(obj);

                //停止循环进度条
                clearInterval(incount);
                //将进度条填充到100
                pg.value = 100;

                // alert(obj.data);
                //判断登陆是否成功
                if(obj.data == "登陆成功")
                {
                    //加入延时，达到线程同步的效果
                    setTimeout(func,500);
                    function func(){
                        alert(obj.data);
                        //跳转
                        window.location.href='/supermarket/productlist';

                    }
                    
                    
                    
                }

            // //进行页面跳转
            // if(obj.data.msg == "恭喜您，注册成功"){
            //     //跳转
            //     window.location.href='/supermarket/login';
            // }


        });

        }
    </script>
    
    
</body>
</html>